
<pro-header ></pro-header>
<div class="ui-g">
    <div class="ui-g-6">
        <p-card [style]="{width: '100%'}">
            <form nz-form  [nzLayout]="'inline'">
                <div nz-row [nzType]="'flex'" [nzGutter]="24">
                    <div nz-col [nzSpan]="24" class="mb-md">
                        <div nz-form-item class="d-flex">
                            <div nz-form-label><label >应用名称</label></div>
                            <div nz-form-control class="flex-1">
                                <nz-select style="width:100%"  [(ngModel)]="acmenuModule.appData"  nzAllowClear name="应用名称" [nzSize]="'large'"
                                           [nzPlaceHolder]="'应用名称'" nzId="应用名称" (ngModelChange)="appCodeChanges(acmenuModule.appData)">
                                    <nz-option     *ngFor="let i of appData; let idx = index" [nzLabel]="i.appName" [nzValue]="i.guid"></nz-option>
                                </nz-select>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </p-card>
        <p-card  [style]="{width: '100%'}" *ngIf="treeshow">
            <app-tree [initDate] = "treedata"
                      [nodrop] = "nodrop"
                      [searchTitle] = "searchTitle"
                      [itemsData]="treemenus"
                      (Select)="TreeSelect($event)"
                      (MenuSelect)="RightSelect($event)"
                      (clickFunc)="clickFunc($event)"
                      (dropEvent)="dropEvent($event)"
                      (serchValue)="searchVal($event)"
                      [selectionType]='selectionType'
            ></app-tree>
        </p-card>
    </div>
    <!--左侧展示详细信息-->
    <div class="ui-g-6" >
        <p-card  [style]="{width: '100%'}" *ngIf="inforShow">
            <!--<div nz-form-item class="d-flex">
                <div nz-col [nzSpan]="18">
                    应用ID：{{acMenuInfor.guidApp}}
                </div>
            </div>-->
            <div nz-form-item class="d-flex">
                <div nz-col [nzSpan]="18">
                    菜单类型：{{ acMenuInfor.isleaf === '是' && '菜单' ||  acMenuInfor.isleaf === '否' && '子菜单'}}
                </div>
            </div>
            <div nz-form-item class="d-flex">
                <div nz-col [nzSpan]="18">
                    菜单名称：{{acMenuInfor.menuName}}
                </div>
            </div>
            <div nz-form-item class="d-flex">
                <div nz-col [nzSpan]="18">
                    菜单显示名称：{{acMenuInfor.menuLabel}}
                </div>
            </div>
            <div nz-form-item class="d-flex">
                <div nz-col [nzSpan]="18">
                    菜单代码：{{acMenuInfor.menuCode}}
                </div>
            </div>
            <div nz-form-item class="d-flex">
                <div nz-col [nzSpan]="18">
                    菜单图标：<span [class]="acMenuInfor.imagePath"></span>
                </div>
            </div>
            <div nz-form-item class="d-flex" *ngIf="disableFlag">
                <div nz-col [nzSpan]="18">
                    UI入口：{{acMenuInfor.uiEntry}}
                </div>
            </div>
            <div nz-form-item class="d-flex" *ngIf="disableFlag">
                <div nz-col [nzSpan]="18">
                    服务入口：{{acMenuInfor.serviceEntry}}
                </div>
            </div>
            <div nz-form-item class="d-flex" *ngIf="disableFlag">
                <div nz-col [nzSpan]="18">
                    功能ID：{{acMenuInfor.funcName + '---' + acMenuInfor.guidFunc}}
                </div>
            </div>
        </p-card>
    </div>
</div>
<!--弹窗页面-->
<nz-modal [nzVisible]="modalVisible"  [nzMaskClosable]="false"  [nzWidth]="1024" [nzTitle]="tanchuangTitle"  [nzConfirmLoading]="loading" [nzContent]="dictModal"
          (nzOnCancel)="modalVisible=false" [nzFooter]="modalFooter">
    <ng-template #dictModal>
        <form novalidate  (ngSubmit)="save()"  #f="ngForm" >
            <div nz-row  [nzType]="'flex'" [nzJustify]="'end'" [nzGutter]="24">
                <div nz-row  [nzType]="'flex'" [nzJustify]="'end'" [nzGutter]="24">
                  <!--  <div nz-col [nzSpan]="24" class="mb-md">
                        <div nz-form-item class="d-flex">
                            <div nz-col [nzSpan]="4"   nz-form-label class="alignment"><label for="funcCode">应用ID</label></div>
                            <div nz-col [nzSpan]="20" nz-form-control>
                                <nz-input [(ngModel)]="addMenuData.guidApp" name="guidApp"   [nzSize]="'large'" [nzPlaceHolder]="'应用ID'" nzId="guidApp"></nz-input>
                            </div>
                        </div>
                    </div>-->
                 <!--   <div nz-col [nzSpan]="24" class="mb-md">
                        <div nz-form-item class="d-flex">
                            <div nz-col [nzSpan]="4"   nz-form-label class="alignment"><label for="funcCode">是否是叶子菜单</label></div>
                            <div nz-col [nzSpan]="20" nz-form-control>
                                <nz-select style="width:100%" [(ngModel)]="addMenuData.isLeaf"  disabled name="isLeaf" [nzSize]="'large'" [nzPlaceHolder]="'是否是叶子菜单'" nzId="isLeaf">
                                    <nz-option  *ngFor="let i of Leafs; let app = index" [nzLabel]="i.text" [nzValue]="i.value" ></nz-option>
                                </nz-select>
                            </div>
                        </div>
                    </div>
                    <div nz-col [nzSpan]="24" class="mb-md" *ngIf="menuType !== 'root'">
                        <div nz-form-item class="d-flex">
                            <div nz-col [nzSpan]="4"   nz-form-label class="alignment"><label for="funcCode">父菜单</label></div>
                            <div nz-col [nzSpan]="20" nz-form-control>
                                <nz-select style="width:100%" [(ngModel)]="addMenuData.guidParents" disabled name="guidParents" [nzSize]="'large'" [nzPlaceHolder]="'父菜单'" nzId="guidParents">
                                    <nz-option  *ngFor="let i of guidParents; let app = index" [nzLabel]="i.label +'-'+ i.guid" [nzValue]="i.guid" ></nz-option>
                                </nz-select>
                            </div>
                        </div>
                    </div>-->
                    <div nz-col [nzSpan]="24" class="mb-md">
                        <div nz-form-item class="d-flex">
                            <div nz-col [nzSpan]="4"   nz-form-label class="alignment"><label for="funcCode">菜单名称</label><span [ngClass]="{'fromErrors':menuName.errors?.required}">* </span></div>
                            <div nz-col [nzSpan]="20" nz-form-control>
                                <nz-input [(ngModel)]="addMenuData.menuName" name="menuName" #menuName="ngModel"  required [nzSize]="'large'" [nzPlaceHolder]="'菜单名称'" nzId="menuName"></nz-input>
                            </div>
                        </div>
                        <div *ngIf="menuName.errors?.required && menuName.touched"  nz-col [nzSpan]="6" [nzOffset]="3"     class="fromErrors">
                            请必须菜单名称
                        </div>
                    </div>
                    <div nz-col [nzSpan]="24" class="mb-md">
                        <div nz-form-item class="d-flex">
                            <div nz-col [nzSpan]="4"   nz-form-label class="alignment"><label for="funcCode">菜单代码</label><span [ngClass]="{'fromErrors':menuCode.errors?.required}">* </span></div>
                            <div nz-col [nzSpan]="20" nz-form-control>
                                <nz-input [(ngModel)]="addMenuData.menuCode" name="menuCode" #menuCode="ngModel"  required [nzSize]="'large'" [nzPlaceHolder]="'菜单代码'" nzId="menuCode"></nz-input>
                            </div>
                        </div>
                        <div *ngIf="menuCode.errors?.required && menuCode.touched"  nz-col [nzSpan]="6" [nzOffset]="3"     class="fromErrors">
                            请必须菜单代码
                        </div>
                    </div>
                    <div nz-col [nzSpan]="24" class="mb-md">
                        <div nz-form-item class="d-flex">
                            <div nz-col [nzSpan]="4"   nz-form-label class="alignment"><label for="funcCode">显示名称</label></div>
                            <div nz-col [nzSpan]="20" nz-form-control>
                                <nz-input [(ngModel)]="addMenuData.menuLabel" name="menuLabel"   [nzSize]="'large'" [nzPlaceHolder]="'显示名称'" nzId="menuLabel"></nz-input>
                            </div>
                        </div>
                    </div>
                    <div nz-col [nzSpan]="24" class="mb-md" *ngIf="!guidFuncshow">
                        <div nz-form-item class="d-flex">
                            <div nz-col [nzSpan]="4"   nz-form-label class="alignment"><label>菜单图标</label><span [ngClass]="{'fromErrors':f.controls.imagePath?.errors}">* </span></div>
                            <div nz-col [nzSpan]="1"><label><span [class]="addMenuData.imagePath"></span></label></div>
                            <div nz-col [nzSpan]="19" nz-form-control>
                                <nz-select style="width: 100%;" nzAllowClear [(ngModel)]="addMenuData.imagePath" required  name="imagePath"  [nzSize]="'large'"   nzAllowClear>
                                    <nz-option *ngFor="let option of options" [nzLabel]="option.label" [nzValue]="option.label">
                                        <ng-template #nzOptionTemplate><i  [ngClass]="option.label"></i> {{option.label}}</ng-template>
                                    </nz-option>
                                </nz-select>
                            </div>
                        </div>
                        <div *ngIf="f.controls.imagePath?.errors && f.controls.imagePath.touched" nz-col [nzSpan]="6" [nzOffset]="3"     class="fromErrors">
                            请必须选择一个菜单图标
                        </div>
                    </div>
                    <div nz-col [nzSpan]="24" class="mb-md" *ngIf="guidFuncshow">
                        <div nz-form-item class="d-flex">
                            <div nz-col [nzSpan]="4"   nz-form-label class="alignment"><label>功能ID</label><span [ngClass]="{'fromErrors':f.controls.guidFunc?.errors}">* </span></div>
                            <div nz-col [nzSpan]="20" nz-form-control>
                                <nz-select style="width:100%" nzAllowClear   [(ngModel)]="addMenuData.guidFunc" nzShowSearch   required  name="guidFunc" [nzSize]="'large'" [nzPlaceHolder]="'功能ID'" nzId="guidFunc">
                                    <nz-option  *ngFor="let i of guidFuncList; let app = index" [nzLabel]="i.funcName +'-'+ i.funcCode" [nzValue]="i.guid" ></nz-option>
                                </nz-select>
                            </div>
                        </div>
                        <div *ngIf="f.controls.guidFunc?.errors && f.controls.guidFunc.touched" nz-col [nzSpan]="6" [nzOffset]="3"     class="fromErrors">
                            请必须选择菜单对应功能
                        </div>
                    </div>
                </div>
            </div>
            <div nz-row>
                <div nz-col [nzSpan]="6" [nzOffset]="19">
                    <button style="margin-right: 16%" nz-button [nzType]="'default'" [nzSize]="'large'" (click)="menuCancel()">
                        取消
                    </button>
                    <button nz-button type="submit" [nzType]="'primary'" [nzSize]="'large'" [disabled]="f.invalid"  [nzLoading]="isConfirmLoading">
                        提 交
                    </button>
                </div>
            </div>
        </form>
    </ng-template>
    <ng-template #modalFooter></ng-template>
</nz-modal>






